/*----------------------------页面区域---------------------------------*/
<template> 
        <div class="curd">
            <el-form :model="codeData" label-width="130px">
                <el-row :gutter="20">
                    <el-col :span="5" :offset="0">
                        <el-form-item label="dao数据对象名称">
                            <el-input v-model="codeData.sqlname" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="0">
                        <el-form-item label="数据对象名称">
                            <el-input v-model="codeData.name" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="0">
                        <el-form-item label="请求方法">
                            <el-select v-model="codeData.type" placeholder="Select">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="5" :offset="0">
                        <el-form-item label="servue文件夹">
                            <el-input v-model="codeData.serverFile" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="0">
                        <el-form-item label="api文件夹">
                            <el-input v-model="codeData.apiFile" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="0">
                        <el-form-item label="controller文件夹">
                            <el-input v-model="codeData.controllerFile" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
       
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="介绍" name="introduce">
                <div class="introduce">
                    <h3>
                        基础版的CRUD是配合官方代码生成工具gf gen dao  生成的entity,dao,do
                    </h3>
                    <br />
                    <h3>
                        来对应生成CRUD代码,通过dao生成的entity为基础拓展
                    </h3>
                    <br />
                    <h3>
                        复制顺序 api---server---controller---cmd
                    </h3>
                    <br />
                    <h1 style="color:red">
                        特别注意:复制黏贴当中 有些特殊符号 会转义  黏贴完自己修改下
                    </h1>
                </div>
            </el-tab-pane>
            <el-tab-pane label="server" name="server">
                <serverVue :data="codeData" />
            </el-tab-pane>
            <el-tab-pane label="API" name="api">
                <apiVue :data="codeData" />
            </el-tab-pane>
            <el-tab-pane label="controller" name="third">
                <controller :data="codeData" />
            </el-tab-pane>
             <el-tab-pane label="cmd" name="cmd">
                 <cmd :data="codeData" />
            </el-tab-pane>
            <el-tab-pane label="model" name="fourth">
                 <model :data="codeData" />
            </el-tab-pane>
            <el-tab-pane label="webApi" name="webApi">
                 <webapiVue :data="codeData" />
            </el-tab-pane>
            <el-tab-pane label="webOtherVue" name="webOtherVue">
                 <webOtherVue :data="codeData" />
            </el-tab-pane>
        </el-tabs>
</template>
/*----------------------------逻辑区域---------------------------------*/
<script setup>
import {ref,reactive,watch,onMounted,toRefs} from 'vue'
import apiVue from './components/api.vue'
import controller from './components/controller.vue'
import model from './components/model.vue'
import serverVue from './components/server.vue'
import cmd from './components/cmd.vue'
import webapiVue from './components/webapi.vue'
import webOtherVue from './components/webOther.vue'
const codeData = reactive({
    sqlname: 'SysUser',
    name:'User',
    serverFile:'servicd',
    apiFile:'api',
    controllerFile:'controller',
    type: 'post',
})
watch(codeData, (newVal, oldVal) => {
      localStorage.setItem('gfgencode', JSON.stringify(newVal));
    });
onMounted(()=>{
    var data1 = JSON.parse(localStorage.getItem('gfgencode'));
    if (data1 != null){
        codeData.sqlname = data1.sqlname
        codeData.name = data1.name
        codeData.serverFile = data1.serverFile
        codeData.apiFile = data1.apiFile
        codeData.controllerFile = data1.controllerFile
        codeData.type = data1.type
    }
})
const activeName = ref('introduce')
const options = [
    {
        value: 'get',
        label: 'get'
    },
    {
        value: 'post',
        label: 'post'
    },
    {
        value: 'put',
        label: 'put'
    },
    {
        value: 'delete',
        label: 'delete'
    }
]

// 1
</script>

<style lang="scss" scoped>
.curd{
    width: calc(100% - 10px);
}
</style>